<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="UTF-8">
    <title>后台布局</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <script src="/layui/layui.js"></script>
</head>
<body>


<!--编辑功能的form-->



<table id="showAdmin" lay-filter="adminFilter"></table>
</body>
<!--顶部工具栏-->

<!--实现管理员管理操作功能按钮-->



<script>
    layui.use(['table', 'layer', 'jquery', 'form'], function () {
        let table = layui.table;
        let layer = layui.layer;
        let $ = layui.jquery;
        let form = layui.form;

        let adminTable = table.render({
            elem: '#showAdmin'
            , url: '/admin/selectAll' //数据接口
            , toolbar: '#adminToolbar' //开启头部工具栏，并为其绑定左侧模板
            , defaultToolbar: []
            , page: true//开启分页
            , limit: 5
            , limits: [5, 10, 15, 20]
            , title: 'adminTable'
            , cols: [
                [ //表头

                    {field: 'aname', title: '管理员姓名', width: 100}
                    , {field: 'aemail', title: '管理员邮箱', width: 200}
                    , {field: 'atel', title: '管理员电话', width: 200}
                    , {field: 'agender', title: '管理员性别', width: 100,templet: function (type) {
                        if (type.agender === 1) {
                            return '男';
                        } else {
                            return '女';
                        }
                    }}
                ]
            ]
        });
        //监听行工具事件
        table.on('tool(adminFilter)', function (obj) {
            let data = obj.data //获得当前行数据
                , layEvent = obj.event; //获得 lay-event 对应的值
            if (layEvent === 'edit') {

                form.val('updateAdminForm', {
                    'aid': data.aid,
                    'aemail': data.aemail,
                    'atel': data.atel,
                    'apassword': data.apassword,
                });
                layer.open({
                    title: '编辑信息',
                    type: 1,
                    area: ['500px', '500px'],
                    content: $("#updateAdminForm")//这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
                });
            }
        });

        //form表单实现更新功能
        form.on('submit(updateAdminFilter)', function (data) {

            //提交表单数据
            $.ajax({
                url: "/admin/update",
                type: "PUT",
                dataType: "JSON",
                contentType:"application/json;charset=UTF-8",
                data:JSON.stringify(data.field),
                success: function (ret) {
                    if (ret.code == 0) {
                        //关闭对话框
                        layer.closeAll();
                        //刷新表格数据
                        adminTable.reload({
                            page: {
                                curr: 1 //重新从第 1 页开始
                            }
                        });
                        layer.msg(ret.msg, {icon: 6});
                    } else {
                        layer.msg(ret.msg, {icon: 5});
                    }
                }
            });
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });

        //监听头工具栏事件
        table.on('toolbar(adminFilter)', function (obj) {
            let checkStatus = table.checkStatus(obj.config.id)
                , data = checkStatus.data; //获取选中的数据
            switch (obj.event) {
                case 'addDept':
                    document.getElementById("insertDeptForm").reset();
                    layer.open({
                        title: '添加部门',
                        type: 1,
                        area: ['500px', '450px'],
                        content: $("#insertDeptForm")
                    });
                    break;
                case 'deleteAdmins':
                    if (data.length == 0) {
                        layer.msg('请选择一行');
                    } else {
                        var idList=[];
                        //遍历数组data，抽取所有的id
                        for (let i = 0; i < data.length; i++) {
                            idList[i]=(data[i].deptId);
                        }
                        layer.confirm('真的删除行么', function () {
                            //for循环收集所有选中的id

                            $.ajax({
                                url: "/admin/delete",
                                type: "delete",
                                dataType: "JSON",
                                data:{idList:idList},
                                success: function (ret) {
                                    if (ret.code == 0) {
                                        //刷新表格数据
                                        adminTable.reload({
                                            page: {
                                                curr: 1 //重新从第 1 页开始
                                            }
                                        });
                                        layer.msg(ret.msg, {icon: 6});
                                    } else {
                                        layer.msg(ret.msg, {icon: 5});
                                    }
                                }
                            });
                        });
                    }
                    break;
            }
        });

        //form表单实现添加功能
        form.on('submit(insertadminFilter)', function (data) {

            //提交表单数据

            $.ajax({
                url: "/admin/insert",
                type: "POST",
                dataType: "JSON",
                contentType:"application/json;charset=UTF-8",
                data:JSON.stringify(data.field),
                success: function (ret) {
                    if (ret.code == 0) {
                        //关闭对话框
                        layer.closeAll();
                        //刷新表格数据
                        adminTable.reload({
                            page: {
                                curr: 1 //重新从第 1 页开始
                            }
                        });
                        layer.msg(ret.msg, {icon: 6});
                    } else {
                        layer.msg(ret.msg, {icon: 5});
                    }
                }
            });


            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });

        //实现顶部搜索框
        form.on('submit(searchFilter)', function (data) {
            //执行重载
            adminTable.reload({
                where: {
                    deptName: data.field.deptName,
                    deptLoc: data.field.deptLoc,

                }
                , page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });
        //重置条件查询表单，刷新table数据
        $("#myButton").click(function () {
            adminTable.reload({
                where: { //设定异步数据接口的额外参数，任意设
                    deptName: ""
                    , deptLoc: ""

                }
                , page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
        });
    });
</script>
</html>